<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>产品工序设计</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/layuicmspublic.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
		<link rel="stylesheet" href="../../../js/bootstrap/css/bootstrap.min.css" media="all">

		<!-- <link rel="stylesheet" type="text/css" href="https://raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css" /> -->
	</head>

	<body>

		<!-- <div id="zzh"> -->
		<div class="layuimini-container">
			<div class="layuimini-main">
				<!--搜索开始-->
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">产品名称：</label>
									<div class="layui-input-inline">
										<input type="text" name="productName" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-block" style="text-align: center;">
							<a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label class="layui-icon layui-icon-search"></label>搜索</a>
							<a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()" lay-filter="data-search-btn"><label
								 class="layui-icon layui-icon-refresh"></label>重置</a>
						</div>
					</div>
					</form>
			</div>
			</fieldset>
			<!--搜索结束-->

			<!--表格开始-->
			<table class="layui-hide" id="goodsTable" lay-filter="goodsTable"></table>

			<div style="display: none;" type="text/html" id="goodsToolBar">
				<a class="layui-btn goods_btn_add layui-btn-sm" lay-event="add">添加</a>
				<a class="layui-btn goods_btn_batchdelete layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">批量删除</a>
			</div>
			<div style="display: none;" type="text/html" id="goodsTableBar">
				<a class="layui-btn goods_btn_update layui-btn-xs layui-btn-warm data-count-delete" lay-event="update">制定</a>
			</div>
			<div style="display: none;" type="text/html" id="loadProDetailsTableBar">
				<a class="layui-btn goods_btn_update layui-btn-xs layui-btn-warm data-count-delete" lay-event="designs">设计</a>
			</div>



			<!--  是否可用 选择  -->
			<script type="text/html" id="availableTpl">
				<!-- 这里的 checked 的状态只是演示 -->
            <input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用"
                lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
            </script>



			<!--表格结束-->
			<div id="zzh">
				<!--添加和修改的弹出层开始-->
				<div id="addOrUpdateDiv" style="display: none;padding: 1.3125rem 3.3125rem 0.3125rem 3.3125rem;">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
						<div class="layui-col-md12 layui-col-xs12">
							<div class="layui-row ">

								<div class="layui-inline">
									<div class="layui-form-item magt3">
										<label class="layui-form-label">工序单编号：</label>
										<div class="layui-input-block">
											<input type="text" name="designId" disabled="disabled" class="layui-input" lay-verify="required" placeholder="工序单编号">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">产品名称：</label>
										<div class="layui-input-block">
											<!-- 做修改  -->
											<input type="hidden" name="id" />
											<input type="text" name="productName" disabled="disabled" class="layui-input" lay-verify="required"
											 placeholder="产品名称">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">设计人：</label>
										<div class="layui-input-block">
											<input type="text" name="register" disabled="disabled" class="layui-input" lay-verify="required" placeholder="设计人">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">产品编号：</label>
										<div class="layui-input-block">
											<input type="text" name="productId" disabled="disabled" class="layui-input" lay-verify="required"
											 placeholder="产品编号">
										</div>
									</div>
									<!--  -->
									<div class="layui-inline">
										<label class="layui-form-label">物料总成本：</label>
										<div class="layui-input-block">
											<input type="text" name="moduleSubtotal" disabled="disabled" class="layui-input" lay-verify="required"
											 placeholder="物料总成本">
										</div>
									</div>


									<!-- <div class="layui-form-item magt3">
										<label class="layui-form-label">工序：</label>
										<div class="layui-input-block">

											<v-select :placeholder="placeholder" multiple :options="processOptions" label="procedurename" @input="selected_brand"
											 :value.sync="sel_brand_obj">
											</v-select>


										</div>
									</div>
 -->
									<!-- 		<table class="layui-table">
										<thead>
											<tr style="background-color: #fff;">
												<th>序号</th>
												<th>工序名称</th>
												<th>描述</th>
												<th width="120px">工时</th>
												<th>单位工时成本</th>
												<th>工时成本小计</th>
												<th>物料成本小计</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item,index) in sel_brand_obj">
												<td>{{item.procedureid}}</td>
												<td>{{item.procedurename}}</td>
												<td>{{item.proceduredescribe}}</td>
												<td><input type="text" v-model="item.tile" class="layui-input" lay-verify="required" placeholder="工时/小时"></td>
												<td><input type="text" v-model="item.cost" class="layui-input" lay-verify="required" placeholder="工时成本"></td>
												<td>{{item.tile*item.cost}}</td>
												item.tile*item.cost == "NaN" == false ? 0  
												<td>{{555}}</td>
											</tr>
										</tbody>
									</table> -->



									<!--表格开始-->
									<table class="layui-hide" id="loadProDetailsTable" style="margin-top: 10px;" lay-filter="loadProDetailsTable"></table>



								</div>
							</div>

						</div>
						<div class="layui-form-item">
							<div class="" style="text-align: center;padding-top: 20px;">
								<a class="layui-btn " lay-submit="" lay-filter="doSubmit"><label class="layui-icon layui-icon-release"></label>提交</a>
								<!-- <a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()" lay-filter="data-search-btn"><label
									 class="layui-icon layui-icon-refresh"></label>重置</a> -->
							</div>
						</div>
					</form>
				</div>
				<!--添加和修改的弹出层结束-->
			</div>
		</div>
		<!-- </div> -->
		<!-- </div> -->
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>
		<script src="../../../js/vue/vuejs-2.5.16.js" charset="utf-8"></script>
		<script src="../../../js/vue/vue-selected.js" charset="utf-8"></script>
		<script src="../../../js/vue/axios-0.18.0.js" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('v-select', VueSelect.VueSelect);
			new Vue({
				el: '#zzh',
				data: {
					id: "",
					placeholder: '可以进行多选',
					processOptions: [],
					selectBrands: [],
					sel_brand_obj: [],
				},
				methods: {
					selected_brand: function(values) {
						// this.selectBrands =values.map(function(obj){
						//     return obj.id
						// });
						// console.log(this.sel_brand_obj)
					},
					loadProcessOptions: function() {
						var _this = this
						axios.post(api1 + "PDetails/findAll", {}, {
								headers: {
									'TOKEN': token
								}
							})
							.then(function(response) {
								// // alert("Sdsdsd")
								// console.log(response.data)
								_this.processOptions = response.data;
								// console.log("----------------------" + _this.processOptions)
							}).catch(function(reason) {
								// console.log(reason);
							})
					}
				},
				mounted() {
					this.loadProcessOptions()
				}
			})
		</script>
		<script>
			layui.use(['form', 'table', 'laydate', 'layer', 'upload'], function() {
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var layer = layui.layer;
				var upload = layui.upload;
				// 物料编号生成
				let id = generatingNumberingRules("201", 4)
				// console.log(id)


				// 加载数据表格
				// /api1/ProcessMaterialDesign/loadProcesses
				var tableIns = table.render({
					elem: '#goodsTable',
					url: api1 + 'ProcessMaterialDesign/loadProcesses?checkTag=S001-2&designModuleTag=G002-1',
					// toolbar: "#goodsToolBar",
					cellMinWidth: true,
					height: 'full-220',
					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'designId',
								title: '工序设计单编号',
								align: "center"
							},
							{
								field: 'productId',
								title: '产品编号',
								align: "center"
							},
							{
								field: 'productName',
								title: '产品名称',
								align: "center"
							}, {
								field: 'designer',
								title: '设计人',
								align: "center"
							},
							{
								field: 'register',
								title: '登记人',
								align: "center"
							},
							{
								field: 'registerTime',
								title: '登记时间',
								align: "center"
							},
							{
								field: 'costPriceSum',
								title: '工时总成本',
								align: "center"
							},

							{
								title: '操作',
								templet: '#goodsTableBar',
								fixed: "right",
								align: "center",
								width: 180
							}
						]
					],
					page: true
				});

				// 监听搜索操作
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					//执行搜索重载
					table.reload('goodsTable', {
						page: {
							curr: 1
						},
						url: api1 + 'ProcessMaterialDesign/loadProcesses?checkTag=S001-2&designModuleTag=G002-1&' + params
					});
					return false;
				});

				//监听表头的事件
				table.on('toolbar(goodsTable)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							batchdelete();
							break;
						case 'add':
							openAddGoods();
							break;
					};
				});
				//打开添加商品的弹层
				var mainIndex;
				var url; //动态的url

				/* 	table.on("tool(loadProDetailsTable)", function(obj) {
					var data = obj.data;
					if (obj.event == "designs") {
						opendesigns(data);
					}
				})
 */


				//监听行数据的事件
				table.on('tool(goodsTable)', function(obj) {
					var data = obj.data;
					// console.log(obj.event)
					if (obj.event === 'delete') {
						layer.prompt({
							formType: 1,
							value: '',
							maxlength: 6, //可输入文本的最大长度，默认500
							title: '敏感操作，请输入口令'
						}, function(value, index, elem) {
							if (value == 'yby123') {
								$.post(api1 + "goods/deleteGoods", {
									id: data.id
								}, function(res) {
									layer.msg(res.msg);
									obj.del();
									layer.close(index);
								})
							} else {
								layer.msg("口令错误");
							}
						});
						// design
					} else if (obj.event === 'update') {
						let datas = data;
						let rows = "";
						let i = 0;
						for (var key in datas) {
							if (i == 0) {
								rows += '?ids=111&' + key + '=' + datas[key];
								i++;
							} else {
								rows += '&' + key + '=' + datas[key];
							}
							
						}
						// console.log(rows)
						// alert(rows)
						/* $.each(datas, function(i) {
						    // console.log(datas[i]);
						    // console.log(i);
						}); */
						window.location.href = "AssignWorkOrderForProduction.1.html?id='"+ rows.id +"'+rows=" + rows
					}

				});



				//监听可用操作
				form.on('switch(availableSwitch)', function(obj) {
					// $.get(api1+"goods/getGoodsByProviderId",{id: this.value},function(res){
					// });
					// var checkStatus = table.checkStatus('availableSwitch'); //idTest 即为基础参数 id 对应的值
					// var data = checkStatus.data;
					// var length = checkStatus.data.length;
					// // console.log(data)
					$.post(api1 + "goods/updateGoods", {
						id: this.value,
						available: obj.elem.checked ? 1 : 0
					}, function(res) {
						layer.msg(res.msg);
						tableIns.reload();
					})
				});


			
				// 修改窗体
				function openUpdateGoods(data) {

					// console.log(data)
					mainIndex = layer.open({
						type: 1,
						title: '制定[' + data.productName + ']生产工序',
						content: $("#addOrUpdateDiv"),
						area: ['80%', '800px'],
						maxmin: true,
						success: function(index) {
							//装载数据表格
							form.val("dataFrm", data);
							/* 第二层表格 */
							table.render({
								elem: '#loadProDetailsTable',
								url: api1 + 'ProcessMaterialDesign/loadProDetails?parentId=' + data.id,
								// toolbar: "#goodsToolBar",
								cellMinWidth: true,
								//height: 'full-220',
								cols: [
									[{
											type: "checkbox",
											fixed: "left"
										},
										{
											field: 'detailsNumber',
											title: '序号',
											align: "center"
										},
										{
											field: 'procedureName',
											title: '工序名称',
											align: "center"
										},
										{
											field: 'procedureId',
											title: '工序编号',
											align: "center"
										},
										{
											field: 'procedureDescribe',
											title: '描述',
											align: "center"
										},
										{
											field: 'labourHourAmount',
											title: '小时数',
											align: "center"
										},
										{
											field: 'amountUnit',
											title: '工时单位',
											align: "center"
										},
										{
											field: 'subtotal',
											title: '工时成本小计',
											align: "center"
										},
										{
											field: 'moduleSubtotal',
											title: '物料成本小计',
											align: "center"
										},
										{
											title: '操作',
											templet: '#loadProDetailsTableBar',
											fixed: "right",
											align: "center",
										}
									]
								],
								page: true
							});


						}
					});
				}


				//提交数据
				form.on("submit(doSubmit)", function(data) {
					var btn = $(this);
					btn.text("提 交 中...").attr("disabled", "disabled").addClass("layui-disabled");
					var params = $("#dataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							btn.text("提交").attr("disabled", "").removeClass("layui-disabled");
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				})



			});
		</script>

		<!-- <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
	 
	<script src="https://raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.min.js" type="text/javascript" charset="utf-8"></script>
	 
	<script type="text/javascript">
	    //加载模块
	    layui.use(['jquery', 'formSelects'], function () {
	        var formSelects = layui.formSelects;
	   });
	</script> -->

	</body>

</html>
